<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo03</title>
    <style type="text/css">
    body {
    background: #f8f8f8;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0 10px;
    padding: 0;
}
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
  }
.green{
    background-color:#6fb936;
  }
    </style>
</head>
<body>
    <div class="box green box1">1</div>
    <div class="box green box2">2</div>
    <div class="box green box3">3</div>
    <div class="box green box4">4</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script type="text/javascript">
new TweenMax('.box1', 2, {
    x: 200,
    y: 200,
});
</script>
<script type="text/javascript">
TweenMax.staggerTo(['.box2', '.box3'], 1, {y:"+=150", opacity:0.5}, 0.2);
</script>
<script type="text/javascript">
var myTween = new TweenMax('.box4', 4, {
    x: 500,
})
var myTween2 = TweenMax.delayedCall(2, myFunction, ["参数1", "参数2"])
function myFunction(param1, param2) {
   console.log("延迟2秒输出" + param1 + '和' + param2);
}
</script>
</html>
